<template lang="html">
  <section class="components-confirm_detail" v-if="detail">
    <div class="detail_content">
      <div class="order_info">
        <div class="confirm_title">
          <h1>请确认订单信息</h1>
        </div>
        <div class="info_row">
            <span>课程</span>
            <span>{{detail.subjectName}}</span>
        </div>
        <div class="info_row">
            <span>教练</span>
            <span>{{detail.coachName}}</span>
        </div>
        <div class="info_row">
            <span>时间</span>
            <span>{{detail.startTime}}</span>
        </div>
        <div class="add info_row">
          <div>
            <span>地点</span>
            <span>{{detail.city}}{{detail.area}}</span>
          </div>
          <p class="address_detail">{{detail.address}}</p>
        </div>
        <div class="info_row">
            <span>价格</span>
            <span>￥{{detail.currentPrice}}</span>
        </div>
        <div class="use_ticket info_row">
            <span>使用优惠券</span>
            <span @click="$emit('selectCoupon')">选择 ></span>
        </div>
      </div>
      <div class="confirm_ticket" @click="$emit('selectCoupon')" v-if="currentCoupon !== null">
        <div class="ticket_info" >
          <h1>{{currentCoupon.coupon_name}}</h1>
          <p>适用于所有课程</p>
        </div>
        <div class="ticket_price">
          <h1 class="price" v-if="currentCoupon.coupon_type == 1">
            <span>￥ {{currentCoupon.coupon_counts}}</span>
          </h1>
          <h1 class="price" v-if="currentCoupon.coupon_type == 2">
            <span>{{currentCoupon.coupon_counts}} 折</span>
          </h1>
          <!-- <h1 class="price"><span>¥  </span><span>20</span></h1> -->
          <p>{{stampToString(currentCoupon.endTime)}}</p>
        </div>
      </div>
      <div class="confirm_ticket choose_ticket" @click="$emit('selectCoupon')" v-else>
        <div class="ticket_info" >
          <h1>未选择优惠券，请点击上面选择 <i class="icon-topGuesture"></i></h1>
          <p>关注微信公众号可领取更多优惠券 <i class="icon-emoji"></i></p>
        </div>
      </div>
    </div>
    <div class="confirm_call">
      <p>有任何问题，拨打客服热线：0755-33231188</p>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object
    },
    currentCouponId: {
      type: String
    }
  },
  data(){
    return {
      currentCoupon: null
    }
  },
  watch: {
    currentCouponId(val){
      this.currentCoupon = this.getCurrentCoupon()
    }
  },
  methods: {
    stampToString(timestamp){
      if(timestamp == 0) return '永久有效'
      let time = new Date(timestamp*1000)
      return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
    },
    getCurrentCoupon(){
      let currentId = parseInt(this.currentCouponId, 10)
      if(!currentId || !this.detail) {
        return null
      } else {
        let currentCoupon = this.detail.coupon.filter(item => {
          let id = parseInt(item.coupon_id, 10)
          if(id === currentId){
            return item
          }
        })
        return currentCoupon[0]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
$Ppadding:18px;
$border_color:#d1d1d1;
$order_bg:#ececec;
$allborder:10px;
.components-confirm_detail{
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: $common-bg;
  box-sizing: border-box;
  padding-top: 32px;
  .detail_content{
    width: 100%;
    border-radius: $allborder;
    box-shadow: 0px 4px 15px 0px rgba(8, 1, 3, 0.3);
    overflow: hidden;
    .order_info{
      width: 100%;
      font-size: 25px;
      background: $order_bg;
      box-sizing: border-box;
      padding: 46px 41px 26px 45px;
      .confirm_title{
        padding-bottom: 31px;
        h1{
          font-size: 33.33px;
          line-height: 44.13px;
          text-align: center;
        }
      }
      .info_row{
        padding:  $Ppadding 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-top: 2px solid $border_color;
        span{
          line-height: 44.13px;
        }
      }
      .add{
        display: flex;
        flex-direction: column;
        padding-bottom: 40px;
        p{
         text-align: right;
        }
        div{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .address_detail{
          box-sizing: border-box;
          padding-left: 100px;
          white-space: normal;
          line-height: 1.5;
        }
      }
    }
    .confirm_ticket{
      width: 100%;
      height: 167px;
      box-sizing: border-box;
      margin-top: -5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 32px 28px 17px 28px;
      background: url("../assets/image/coupon.png") no-repeat;
      background-position: top center;
      background-size: cover;
      .ticket_info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height:100%;
        // box-sizing: border-box;
        // padding-bottom: 20px;
        .icon-topGuesture{
          display: inline-block;
          vertical-align: top;
          width: 25px;
          height: 40px;
          background: url("../assets/image/top_emoji.png") no-repeat;
          background-position: center;
          background-size: cover;
        }
        .icon-emoji{
          display: inline-block;
          vertical-align: top;
          margin-top: -3px;
          width: 25px;
          height: 25px;
          background: url("../assets/image/m+_emoji.png") no-repeat;
          background-position: center;
          background-size: cover;
        }
        h1{
          color: $common-red;
          font-size: 36px;
        }
        p{
          font-size: 18px;
          color: #000;
        }
      }

      .ticket_price{
        height: 100%;
        display: flex;
        color: $common-red;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        // box-sizing: border-box;
        // padding-bottom: 20px;
        .price>span:nth-child(1){
          font-size: 28px;
        }
        .price>span:nth-child(2){
            font-size: 36px;
        }
      }
    }
  }
}
.confirm_call{
  margin-top: 28px;
  padding: 30px 0;
  width: 666px;
  text-align: center;
  border-radius: $allborder;
  background: $order_bg;

  p{
    font-size: 25px;
    color: #6e6e6e;
    display: inline-block;
    position: relative;
    text-indent: 20px;
  }
  p:before{
    content:"";
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: #000;
    position: absolute;
    top: 8px;
    left: 0px;

  }
}
.choose_ticket{
  /*width: 100%;*/
  height: 104px;
  padding-bottom: 27px;

  .ticket_info{
    width: 100%;
    text-align: center;
    h1{
      font-size: 36px;
    }
  }

}
</style>
